<template>
    <div class="bg">
        <div id="top">
            <div class="topw">修改密码</div>
            <div class="topd">
            </div>
        </div>
        <div>
            <div id="main">
                <table>
                    <tr>
                        <td>手机号:</td>
                        <td>
                            <el-input
                                    v-model="UserData.mobile"
                                    :disabled="true">
                            </el-input>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>验证码:</td>
                        <td>
                            <div>
                                <el-input
                                        placeholder="请输入验证码"
                                        v-model="inmessage"
                                >
                                </el-input>
                            </div>
                        </td>
                        <td>
                            <el-button type="primary" plain @click="getMessage"  :disabled="issend">{{content}}</el-button>
                        </td>
                    </tr>
                    <tr>
                        <td>重置密码:</td>
                        <td>
                            <el-input
                                    placeholder="请输入新密码"
                                    v-model="newpassword"
                            >
                            </el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>确定密码:</td>
                        <td>
                            <el-input
                                    placeholder="请重复密码"
                                    v-model="Confirmpassword"
                            >
                            </el-input>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <el-button type="info" plain style="width: 170px" @click="upPassword">修改密码</el-button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "password",
        data() {
            return {
                //用户信息
                UserData: [],
                //新密码
                newpassword:'',
                //确定密码
                Confirmpassword:'',
                //输入的信息
                inmessage:'',
                //获得到的验证码
                message:'',
                //验证码发送状态
                issend:false,
                //按钮内文本
                content: "发送验证码",
                //倒计时时间
                totalTime: 60,
            }
        },
        methods: {
            //加载页面时查询用户
            searchMember() {
                var that = this;
                var token = sessionStorage.getItem("token")
                this.$http.get(`/member/findMemberByToken/${token}`).then(function (success) {
                    that.UserData = success.data.result;
                })
            },
            //获取短信
            getMessage() {
                var that=this;
                //点击之后设置按钮不可取
                this.issend = true;
                //按钮内文本
                this.content = this.totalTime + "s后重新发送";
                let clock = window.setInterval(() => {
                    this.totalTime--;
                    this.content = this.totalTime + "s后重新发送";
                    if (this.totalTime < 0) {
                        window.clearInterval(clock);
                        this.content = "重新发送验证码";
                        this.totalTime = 60;
                        this.issend = false;
                    }
                }, 1000);
                this.$http.get(`/member/getMessage/${that.UserData.mobile}`).then(function (success) {
                    that.message=success.data.result;
                })
            },
            //修改密码
            upPassword(){
                var that=this;
                //判断验证码是否为空
                if (this.inmessage===''){
                    this.$message.error("请先获取验证码")
                }else {
                    //判断验证码是否相同
                    if (this.inmessage===this.message){
                        //判断两次密码是否相同
                        if (this.newpassword===this.Confirmpassword){
                            this.UserData.password=this.newpassword;
                            this.$http.post(`/member/upMemberPasswrod`,this.UserData).then(function (success) {
                                if (success.data.code===200){
                                    that.$message.success("修改成功")
                                    var token = sessionStorage.getItem("token")
                                    that.$http.get(`/member/upTokenUser/${token}`).then(function (tokensuccess) {
                                        if (tokensuccess.data.code===200){
                                            sessionStorage.removeItem("token")
                                            sessionStorage.removeItem("loginusername");
                                            that.$router.push('/')
                                            location.reload()
                                        }
                                    })
                                }else {
                                    that.$message.error(success.data.msg)
                                }
                            })
                        }else {
                            this.$message.error("两次密码不相同")
                        }
                    }else {
                        this.$message.error("验证码匹配失败")
                    }
                }
            },
        },
        created() {
            this.searchMember();
        }
    }
</script>

<style scoped>
    #main {
        float: left;
        margin-top: 20px;
        margin-left: 30px;
        font-size: 12px;
    }
    #main>table > td{
        width: 100px;
        height: 50px;
        line-height: 50px;
    }
</style>